<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/rights">权限管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 添加角色按钮区域 -->
      <el-row>
        <el-col>
          <el-button type="primary" @click="addshowRoleDialog">添加角色</el-button>
        </el-col>
      </el-row>
      <!-- 角色列表 -->
        <!-- row-key用来优化表格渲染，改变数据，只会影响当前行的dom更新，不会影响其他行，提升性能 -->
      <el-table :data="rolesList" border stripe row-key="id"><!--只重新渲染当前行的数据，因此不会使选框回弹《=========-->
        <!-- 展开列:权限信息的展示区域 -->
        <el-table-column type="expand">
          <template #default="scope">
            <el-row v-for="(item1, i1) in scope.row.children" :key="item1.id" :class="['bdbottom', i1 === 0 ? 'bdtop' : '', 'vcenter']">
              <el-col :span="5">
                <el-tag closable @close="removeRightById(scope.row, item1)">
                  {{ item1.authName }}
                </el-tag>
              </el-col>
              <el-col :span="19">
                <el-row v-for="(item2, i2) in item1.children" :key="item2.id" :class="[i2 === 0 ? '' : 'bdtop', 'vcenter']">
                  <el-col :span="6">
                    <el-tag type="success" closable @close="removeRightById(scope.row, item2)">
                      {{ item2.authName }}
                    </el-tag>
                  </el-col>
                  <el-col :span="18">
                    <el-tag type="warning" v-for="item3 in item2.children" :key="item3.id" closable @close="removeRightById(scope.row, item3)">
                      {{ item3.authName }}
                    </el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="角色名称" prop="roleName"></el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
        <el-table-column label="操作" width="300px">
          <template #default="{ row }"><!-- =================================================================================== -->
            <el-button size="small" type="primary" :icon="Edit" @click="showRoleDialog(row)">编辑</el-button>
            <el-button size="small" type="danger" :icon="Delete" @click="deleteRole(row.id)">删除</el-button>
            <el-button size="small" type="warning" :icon="Setting" @click="showSetRightDialog(row)">分配</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 管理角色的组件 -->
    <role-manage ref="roleManageRef" @getRoleList="getRoleList"></role-manage>
    <!-- 分配权限的组件 -->
    <role-rights ref="roleRightsRef" @getRoleList="getRoleList"></role-rights>
  </div>
</template>

<script setup>
import { Edit, Delete, Setting } from '@element-plus/icons-vue'
import RoleManage from './components/RoleManage.vue'
import RoleRights from './components/RoleRights.vue'

import { ref } from 'vue'
import { getRoleListApi, removeRightByIdApi, deleteRoleApi } from '@/api/role'
//import ElMessageBox from 'element-plus/lib/el-message-box'
//import ElMessage from 'element-plus/lib/el-message'
//上面的两个组件不知道为什么没有生效，因此使用下面的手动引入方法
import { ElMessageBox, ElMessage } from 'element-plus'

// 分配权限的组件对象
const roleRightsRef = ref(null)
// 点击分配权限按钮
const showSetRightDialog = row => {
  roleRightsRef.value.open(row)
}

// 管理角色子组件对象
const roleManageRef = ref(null)
// 点击添加或编辑角色按钮触发
const showRoleDialog = row => {//《=================================================
  roleManageRef.value.open(row)
}

const addshowRoleDialog = ()=> {
  roleManageRef.value.open()
}

// 获取角色列表数据
const rolesList = ref([])
const getRoleList = async () => {
  const data = await getRoleListApi()
  rolesList.value = data
}
getRoleList()

// 删除角色对应的权限
const removeRightById = async (role, rights) => {
  try {
    // 弹框询问
    await ElMessageBox.confirm('您确定要删除该角色对应的权限吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    if (rights.children && rights.children.length > 0) {
      ElMessage.warning('该权限有子级，不允许删除')
      return
    }
    const data = await removeRightByIdApi(role.id, rights.id)
    role.children = data
    ElMessage.success('删除成功')
  } catch (err) {
    ElMessage.info('取消删除')
    console.log(err)
  }
}

// 删除角色
const deleteRole = async id => {
  try {
    await ElMessageBox.confirm('您确定要删除该角色吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    await deleteRoleApi(id)
    ElMessage.success('删除成功')
    getRoleList()
  } catch (err) {
    ElMessage.info('取消删除')
    console.log(err)
  }
}
</script>

<style lang="scss" scoped>
//tag标签的间距
.el-tag {
  padding: 13px !important;
  margin: 7px;
}
//每一行的顶部加上边框
.bdtop {
  border-top: 1px solid #eee;
}
//每一行的底部加下边框
.bdbottom {
  border-bottom: 1px solid #eee;
}
//每一个一、二级的内容垂直居中
.vcenter {
  display: flex;
  align-items: center;
}
</style>